<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<!--     <svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
        <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
    </svg> -->

    <!-- fill属性是一种表示属性，用于设置SVG形状的颜色。 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1360 300" preserveAspectRatio="xMinYMin meet">
        <defs>
            <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="black" stop-opacity="0"></stop>
                <stop offset="100%" stop-color="white" stop-opacity="0.8"></stop>
            </linearGradient>        
            <mask id="masked">
                <rect x="0" y="0" width="100%" height="300" fill="url(#gradient)"></rect>
            </mask>    
            <symbol id="postSvg" class="port" viewbox="0 0 40 30"> 
                <g>
                    <g>
                        <rect width="38px" height="30px" x="1" y="2" stroke="none"></rect>
                    </g>
                    <g>
                        <rect width="36px" height="30px" x="2" y="2" stroke-width="2"></rect>
                    </g>
                    <g transform-origin="50% 50%">
                        <path d='M5 3.5V13H35V3.5H5' stroke='gray' fill='none'></path>
                        <path d='M11 4V7V4M13.5'></path>
                    </g>
                </g>
            </symbol>
        </defs>

    </svg>    
</body>
</html>

<!-- SVG有一些预定义的形状元素，可被开发者使用和操作：

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path> -->

<!-- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色 -->